<template>
    <a-form ref="formRef" layout="horizontal" auto-label-width :model="dataForm">
         <a-row :gutter="20" justify="space-between">
             <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="生产车间" field="worksho" 
                :rules="[{ required: true, message: '生产车间必填' }]"
                :validate-trigger="['change', 'blur']">
                <a-input class="aInput"  v-model="dataForm.worksho"/>
                </a-form-item>
             </a-col>    
             <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复T中" field="repeatedTIn" 
                :rules="[{ required: true, message: '复T中必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.repeatedTIn"/>
                </a-form-item>
            </a-col>       
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复T完成" field="repeatedTOk" 
                :rules="[{ required: true, message: '复T完成必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.repeatedTOk"/>
                </a-form-item>
            </a-col>   
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="套棉中" field="harnessIn" 
                :rules="[{ required: true, message: '套棉中必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.harnessIn"/>
                </a-form-item>
            </a-col>       
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="套棉完成" field="harnessOk" 
                :rules="[{ required: true, message: '套棉完成必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.harnessOk"/>
                </a-form-item>
            </a-col>    
         </a-row>
         <a-row :gutter="20" justify="space-between">
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复办中" field="handleIn" 
                :rules="[{ required: true, message: '复办中必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.handleIn"/>
                </a-form-item>
            </a-col>       
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复办完成" field="handleOk" 
                :rules="[{ required: true, message: '复办完成必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.handleOk"/>
                </a-form-item>
            </a-col>    
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="加色中" field="colourIn" 
                :rules="[{ required: true, message: '加色中必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.colourIn"/>
                </a-form-item>
            </a-col>       
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="加色完成" field="colourOk" 
                :rules="[{ required: true, message: '加色完成必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.colourOk"/>
                </a-form-item>
            </a-col>  
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="放样中" field="releaseIn" 
                :rules="[{ required: true, message: '放样中必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.releaseIn"/>
                </a-form-item>
            </a-col>    
         </a-row>   
         <a-row :gutter="20" justify="space-between">
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="放样完成" field="releaseOk" 
                :rules="[{ required: true, message: '放样完成必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.releaseOk"/>
                </a-form-item>
            </a-col>       
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复方中" field="compoundIn" 
                :rules="[{ required: true, message: '复方中必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.compoundIn"/>
                </a-form-item>
            </a-col>    
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复方完成" field="compoundOK" 
                :rules="[{ required: true, message: '复方完成必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.compoundOK"/>
                </a-form-item>
            </a-col>       
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="待刷毛磨毛" field="brushingIn" 
                :rules="[{ required: true, message: '待刷毛磨毛必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.brushingIn"/>
                </a-form-item>
            </a-col>  
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="刷毛磨毛完成" field="brushingOk" 
                :rules="[{ required: true, message: '刷毛磨毛完成必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.brushingOk"/>
                </a-form-item>
            </a-col>    
         </a-row> 
         <a-row :gutter="20" justify="space-between">
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="烧毛中" field="singeingIn" 
                :rules="[{ required: true, message: '烧毛中必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.singeingIn"/>
                </a-form-item>
            </a-col>       
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="烧毛OK" field="singeingOK" 
                :rules="[{ required: true, message: '烧毛OK必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.singeingOK"/>
                </a-form-item>
            </a-col>    
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="定坯OK" field="decideBaseOk" 
                :rules="[{ required: true, message: '定坯OK必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.decideBaseOk"/>
                </a-form-item>
            </a-col>       
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="待长车煮布" field="vehicle" 
                :rules="[{ required: true, message: '待长车煮布必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.vehicle"/>
                </a-form-item>
            </a-col>  
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="煮布OK" field="vehicleOk" 
                :rules="[{ required: true, message: '煮布OK必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.vehicleOk"/>
                </a-form-item>
            </a-col>    
         </a-row> 
         <a-row :gutter="20">
            <a-col  :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="OK" field="ok" 
                :rules="[{ required: true, message: 'OK必填' }]"
                :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.ok"/>
                </a-form-item>
            </a-col>       
            <a-col  :xxl="20" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="备注">
                    <a-input class="aInput" v-model="dataForm.remark"/> 
                </a-form-item>
            </a-col>    
         </a-row> 
    </a-form>
</template>

<script lang="ts">
import { reactive,ref,watch } from 'vue';
import { DuplicateSummary } from  '@/interface/dupSampleReg';
import { FormInstance } from '@arco-design/web-vue';
export default {
   name:'DupSummary',
   props:{
    pageData:{
        type: Object,
        default: () => ({}),
        require: true,
    },
    dataForm:{
        type: Object,
        default: () => ({}),
        require: true,
    },
   },
   setup(props,{expose}) {
        const pageData = ref(props.pageData);
        watch(props.pageData,(val) => { 
        for (var key in val) {
            pageData.value[key] = val[key]
            };
        });
       const dataForm = reactive<DuplicateSummary>({
           id:null,
           duplicateSampleRegisterID:null,
           worksho:'', 
           repeatedTIn:'',
           repeatedTOk:'',
           harnessIn:'',
           harnessOk:'',
           handleIn:'',
           handleOk:'',
           colourIn:'',
           colourOk:'',
           releaseIn:'',
           releaseOk:'',
           compoundIn:'',
           compoundOK:'', 
           brushingIn:'',
           brushingOk:'',
           singeingIn:'',
           singeingOK:'',
           decideBaseOk:'',
           vehicle:'',
           vehicleOk:'',
           ok:'',
           remark:''
       });
       if(props.dataForm){
            for (var key in props.dataForm) {
                dataForm[key] = props.dataForm[key]
            };
        };
       const formRef = ref<FormInstance>();
        formRef.value?.validate().then(async (err) => {
            if(!err){
                expose({dataForm})
            }
        });
        return {
            dataForm,
            pageData
        }
   }
}
</script>

<style scoped>
.aInput{
    background: #fff;
    border: 1px solid #c9cdd3;
    width: 270px;
} 
</style>